<div ng-controller="chatSessionAppCtl">
    <div class="row">
        <div ng-if="1 == 0" class="search">
            <div class="search-wrapper card">
                <input id="search" placeholder="Search this chat session"><i class="material-icons">search</i>
                <div class="search-results"></div>
            </div>
        </div>
        <div class="row"></div>
        <div ng-repeat="message in messages track by $index">
            <div ng-if="message.msgType == 'text' && message.uid != uid" class="row">
                <div class="col s12 m10 l7">
                    <div class="card horizontal">
                        <div class="card-stacked">
                            <div class="card-content">
                                <a ng-click="showUserMenu(message.uid)" href="javascript:void(0)">
                                    <div class="chip">
                                        <img ng-src="{{'/api/getFile?id='+message.avatar}}" alt="{{message.nickname}}">
                                        {{message.nickname}}
                                    </div>
                                </a>
                                {{message.dateline}}
                                <pre style="white-space: pre-wrap;">{{message.content}}</pre>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col m2 l5"></div>
            </div>
            <div ng-if="message.msgType == 'text' && message.uid == uid" class="row">
                <div class="col m2 l5"></div>
                <div class="col s12 m10 l7">
                    <div class="card horizontal grey lighten-3">
                        <div class="card-stacked">
                            <div class="card-content">
                                <div class="chip blue white-text">
                                    <img ng-src="{{'/api/getFile?id='+message.avatar}}" alt="{{message.nickname}}">
                                    {{message.nickname}}
                                </div>
                                {{message.dateline}}
                                <pre style="white-space: pre-wrap;">{{message.content}}</pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div ng-if="message.msgType == 'file' && message.uid != uid" class="row">
                <div class="col s12 m10 l7">
                    <div class="card horizontal">
                        <div class="card-stacked">
                            <div class="card-content">
                                <a ng-click="showUserMenu(message.uid)" href="javascript:void(0)">
                                    <div class="chip">
                                        <img ng-src="{{'/api/getFile?id='+message.avatar}}" alt="{{message.nickname}}">
                                        {{message.nickname}}
                                    </div>
                                </a>
                                {{message.dateline}}
                                <div class="row"></div>
                                <div class="row">
                                    <div ng-if="message.thumbid != ''" class="col s6 offset-s3 center-align">
                                        <a target="_blank" ng-href="{{'/api/getFile?id='+message.fileid}}"><img ng-src="{{'/api/getFile?id='+message.thumbid}}" class="z-depth-1 responsive-img"></a>
                                        <div>{{message.fileName}}</div>
                                    </div>
                                    <div ng-if="message.thumbid == ''" class="col s6 offset-s3 center-align">
                                        <a ng-href="{{'/api/getFile?id='+message.fileid}}"><img src="images/file.png" class="z-depth-1 responsive-img"></a>
                                        <div>{{message.fileName}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col m2 l5"></div>
            </div>
            <div ng-if="message.msgType == 'file' && message.uid == uid" class="row">
                <div class="col m2 l5"></div>
                <div class="col s12 m10 l7">
                    <div class="card horizontal grey lighten-3">
                        <div class="card-stacked">
                            <div class="card-content">
                                <div class="chip blue white-text">
                                    <img ng-src="{{'/api/getFile?id='+message.avatar}}" alt="{{message.nickname}}">
                                    {{message.nickname}}
                                </div>
                                {{message.dateline}}
                                <div class="row"></div>
                                <div class="row">
                                    <div ng-if="message.thumbid != ''" class="col s6 offset-s3 center-align">
                                        <a target="_blank" ng-href="{{'/api/getFile?id='+message.fileid}}"><img ng-src="{{'/api/getFile?id='+message.thumbid}}" class="z-depth-1 responsive-img"></a>
                                        <div>{{message.fileName}}</div>
                                    </div>
                                    <div ng-if="message.thumbid == ''" class="col s6 offset-s3 center-align">
                                        <a target="_blank" ng-href="{{'/api/getFile?id='+message.fileid}}"><img src="images/file.png" class="z-depth-1 responsive-img"></a>
                                        <div>{{message.fileName}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div ng-if="message.msgType == 'online'" class="row center-align">
                <div class="chip blue lighten-4 white-text">{{message.content}} @ {{message.dateline}}</div>
            </div>
            <div ng-if="message.msgType == 'offline'" class="row center-align">
                <div class="chip grey lighten-2 white-text">{{message.content}} @ {{message.dateline}}</div>
            </div>
            <div ng-if="message.msgType == 'join'" class="row center-align">
                <div class="chip green lighten-4 white-text">{{message.content}} @ {{message.dateline}}</div>
            </div>
            <div ng-if="message.msgType == 'leave'" class="row center-align">
                <div class="chip red lighten-4 white-text">{{message.content}} @ {{message.dateline}}</div>
            </div>
            <div ng-if="message.msgType == 'system'" class="row center-align">
                <div class="chip blue white-text">{{message.content}} @ {{message.dateline}}</div>
            </div>
            <div ng-if="message.msgType == 'reject'" class="row center-align">
                <div class="chip red white-text">{{message.content}} @ {{message.dateline}}</div>
            </div>
        </div>
    </div>
</div>




